<template>
  <div>
    <header>
      <van-nav-bar title="嗨购登录" @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
        </template>
      </van-nav-bar>
    </header>
    <main>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
        />
      </van-cell-group>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="password"
          label="密码"
          placeholder="请输入密码"
          :right-icon="flag ? 'eye-o' : 'closed-eye'"
          @click-right-icon="flag = !flag"
          :type="flag ? 'text' : 'password'"
        />
      </van-cell-group>
    </main>
    <div class="login">
      <van-button
        type="block"
        round
        color="red"
        :disabled="flag_d"
        @click="login"
        >登录</van-button
      ><br />
    </div>
    <router-link to="/register" class="goRegister">去注册</router-link>
  </div>
</template>

<script>
import { doLogin } from "../api/login";
import Vue from "vue";
import { Field, CellGroup, NavBar, Button, Toast } from "vant";

Vue.use(Field);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(CellGroup);
Vue.use(Toast);
export default {
  data() {
    return {
      flag: false,
      tel: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home');
    },
    login() {  
      //   qAxios.post("/user/login", { loginname: this.tel, password: this.password })
      doLogin({ loginname: this.tel, password: this.password }).then((res) => {
        // console.log(res.data.data);
        if (res.data.code == 200) {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("id", res.data.data.userid);
          localStorage.setItem("tel",this.tel);
          this.$router.push("/home");
          // console.log(res.data.data.data.token);
        } else if (res.data.code == 10010) {
          Toast("该用户不存在，请先注册");
        } else if (res.data.code == 10011) {
          Toast("密码错误，请重新输入正确密码");
        }
      });
    },
  },
  computed: {
    flag_d() {
      if (this.tel != "" && this.password != "") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped>
main {
  margin-top: 0.5rem;
}
.login {
  width: 3rem;
  margin: 1rem auto 0.2rem auto;
}
.goRegister {
  padding-left: 1.6rem;
}
</style>